<template>
  <el-dialog
    :title="!dataForm.newHouseId ? '新建楼盘' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="区域" prop="newHouseArea">
      <el-upload
        action="http://localhost:88/api/authserver/user/upload/"
        list-type="picture-card"
        :on-success="handleAvatarSuccess"
        multiple>
        <i class="el-icon-plus"></i>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-upload>
    </el-form-item>
      <el-form-item label="区域" prop="newHouseArea">
      <el-input v-model="dataForm.newHouseArea" placeholder="区域"></el-input>
    </el-form-item>
    <el-form-item label="房屋单价" prop="newHousePrice">
      <el-input v-model="dataForm.newHousePrice" placeholder="房屋单价"></el-input>
    </el-form-item>
    <el-form-item label="户型" prop="newHouseType">
      <el-radio v-model="dataForm.newHouseType" label="0">一居室</el-radio>
      <el-radio v-model="dataForm.newHouseType" label="1">二居室</el-radio>
      <el-radio v-model="dataForm.newHouseType" label="2">三居室</el-radio>
      <el-radio v-model="dataForm.newHouseType" label="3">四居室</el-radio>
      <el-radio v-model="dataForm.newHouseType" label="4">五居室</el-radio>
      <el-radio v-model="dataForm.newHouseType" label="5">五居室以上</el-radio>
    </el-form-item>
    <el-form-item label="面积" prop="newHouseAcreage">
      <el-input v-model="dataForm.newHouseAcreage" placeholder="面积"></el-input>
    </el-form-item>
    <el-form-item label="房屋朝向" prop="newHouseOrientation">
      <el-radio v-model="dataForm.newHouseOrientation" label="0">东</el-radio>
      <el-radio v-model="dataForm.newHouseOrientation" label="1">南</el-radio>
      <el-radio v-model="dataForm.newHouseOrientation" label="2">西</el-radio>
      <el-radio v-model="dataForm.newHouseOrientation" label="3">北</el-radio>
    </el-form-item>
    <el-form-item label="房屋标题" prop="newHouseTitle">
      <el-input v-model="dataForm.newHouseTitle" placeholder="房屋标题"></el-input>
    </el-form-item>
    <el-form-item label="房屋描述" prop="newHouseDescription">
      <el-input v-model="dataForm.newHouseDescription" placeholder="房屋描述"></el-input>
    </el-form-item>
    <el-form-item label="房屋类型" prop="newHomeType">
      <el-radio v-model="dataForm.newHomeType" label="0">别墅</el-radio>
      <el-radio v-model="dataForm.newHomeType" label="1">住宅</el-radio>
      <el-radio v-model="dataForm.newHomeType" label="2">写字楼</el-radio>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        dialogVisible: false,
        visible: false,
        dialogImageUrl:'',
        dataForm: {
          newHouseId: 0,
          newHouseArea: '',
          newHousePrice: '',
          newHouseType: '',
          newHouseAcreage: '',
          newHouseOrientation: '',
          newHouseTitle: '',
          newHouseDescription: '',
          newHouseLongitude: '',
          newHouseLatitude: '',
          newHouseState: '',
          newHomeType: '',
          newHouseUserId: '',
          fileList:[]
        },
        dataRule: {
          newHouseArea: [
            { required: true, message: '区域不能为空', trigger: 'blur' }
          ],
          newHousePrice: [
            { required: true, message: '房屋单价不能为空', trigger: 'blur' }
          ],
          newHouseType: [
            { required: true, message: '户型（0:一居室 1:二居室 2:三居室 3:四居室 4:五居室 5:五居室以上）不能为空', trigger: 'blur' }
          ],
          newHouseAcreage: [
            { required: true, message: '面积不能为空', trigger: 'blur' }
          ],
          newHouseOrientation: [
            { required: true, message: '房屋朝向 (0:东 1:南 2:西 3:北 )不能为空', trigger: 'blur' }
          ],
          newHouseTitle: [
            { required: true, message: '房屋标题不能为空', trigger: 'blur' }
          ],
          newHouseDescription: [
            { required: true, message: '房屋描述不能为空', trigger: 'blur' }
          ],
          newHouseLongitude: [
            { required: true, message: '经度不能为空', trigger: 'blur' }
          ],
          newHouseLatitude: [
            { required: true, message: '纬度不能为空', trigger: 'blur' }
          ],
          newHouseState: [
            { required: true, message: '房屋状态 (0; 在售 1:待售 2:售完)不能为空', trigger: 'blur' }
          ],
          newHomeType: [
            { required: true, message: '房屋类型 (0:别墅 1:住宅 2:写字楼)不能为空', trigger: 'blur' }
          ],
          newHouseUserId: [
            { required: true, message: '用户id不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleAvatarSuccess(res, file , fileList) {
        this.dataForm.fileList = []
        fileList.forEach(e => {
          this.dataForm.fileList.push(e.response)
        });
      },
      init (id) {
        this.dialogImageUrl = '';
        this.dataForm.newHouseId = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.newHouseId) {
            this.$http({
              url: this.$http.adornUrl(`/newhouse/newhouse/info/${this.dataForm.newHouseId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.newHouseArea = data.newHouse.newHouseArea
                this.dataForm.newHousePrice = data.newHouse.newHousePrice
                this.dataForm.newHouseType = data.newHouse.newHouseType
                this.dataForm.newHouseAcreage = data.newHouse.newHouseAcreage
                this.dataForm.newHouseOrientation = data.newHouse.newHouseOrientation
                this.dataForm.newHouseTitle = data.newHouse.newHouseTitle
                this.dataForm.newHouseDescription = data.newHouse.newHouseDescription
                this.dataForm.newHouseLongitude = data.newHouse.newHouseLongitude
                this.dataForm.newHouseLatitude = data.newHouse.newHouseLatitude
                this.dataForm.newHouseState = data.newHouse.newHouseState
                this.dataForm.newHomeType = data.newHouse.newHomeType
                this.dataForm.newHouseUserId = data.newHouse.newHouseUserId
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/newhouse/newhouse/${!this.dataForm.newHouseId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'newHouseId': this.dataForm.newHouseId || undefined,
                'newHouseArea': this.dataForm.newHouseArea,
                'newHousePrice': this.dataForm.newHousePrice,
                'newHouseType': this.dataForm.newHouseType,
                'newHouseAcreage': this.dataForm.newHouseAcreage,
                'newHouseOrientation': this.dataForm.newHouseOrientation,
                'newHouseTitle': this.dataForm.newHouseTitle,
                'newHouseDescription': this.dataForm.newHouseDescription,
                'newHouseLongitude': this.dataForm.newHouseLongitude,
                'newHouseLatitude': this.dataForm.newHouseLatitude,
                'newHouseState': this.dataForm.newHouseState,
                'newHomeType': this.dataForm.newHomeType,
                'newHouseUserId': this.dataForm.newHouseUserId,
                'fileList' : this.dataForm.fileList
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
